<template lang="pug">
.cp-order-view
  el-dialog(:title="title", :visible="visible", width="60%", @close="close")
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 采购单号 】
        span(v-text="formData.order")
    el-row(:gutter="20")
      el-col(:span="8")
        strong 【 创建人 】
        span {{ formData.creator | compare-list(empSelect) }}
      el-col(:span="8")
        strong 【 申请人 】
        span {{ formData.applicant | compare-list(empSelect) }}
      el-col(:span="8")
        strong 【 需求部门 】
        span {{ formData.depart | compare-list(oneDeptSelect) }}
    el-row(:gutter="20")
      el-col(:span="8")
        strong 【 联系人 】
        span {{ formData.contact | compare-list(empSelect) }}
      el-col(:span="8")
        strong 【 供应商 】
        span {{ formData.supply | compare-list(supplySelect) }}
      el-col(:span="8")
        strong 【 成本中心 】
        span {{ formData.costCenter }}
    el-row(:gutter="20")
      el-col(:span="8")
        strong 【 联系电话 】
        span {{ formData.mobile }}
      el-col(:span="8")
        strong 【 采购日期 】
        span {{ formData.buyTime | date-locale }}
      el-col(:span="8")
        strong 【 下联单号 】
        span {{ formData.downOrder }}
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 供应商地址 】
        span {{ formData.providerAddr || '暂无' }}
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 申请单号 】
        span {{ formData.reqOrder }}
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 备注 】
        span {{ formData.comment }}
    el-tabs.ow-tabs(v-model="activeTabIndex", @tab-click="handlePopTab")
      el-tab-pane(label="基本信息", name="0")
      el-tab-pane(label="付款方式", name="1")
      el-tab-pane(label="订单条款", name="2")
    .ow-table.tab-base(v-show="tabShows[0]")
      el-table(:data="formData.materiels", size="mini")
        el-table-column(align="center", show-overflow-tooltip, type="index", label="序号", :fixed="true")
        el-table-column(align="center", show-overflow-tooltip, prop="incode", label="物料编码")
        el-table-column(align="center", show-overflow-tooltip, prop="name", label="名称")
        el-table-column(align="center", show-overflow-tooltip, prop="maker", label="制造商")
        el-table-column(align="center", show-overflow-tooltip, prop="size", label="规格")
        el-table-column(align="center", show-overflow-tooltip, prop="bom", label="BOM版本")
        el-table-column(align="center", show-overflow-tooltip, prop="buyNum", label="采购数量")
        el-table-column(align="center", show-overflow-tooltip, prop="buyUnit", label="采购单位")
        el-table-column(align="center", show-overflow-tooltip, prop="price", label="单价(含税)")
        el-table-column(align="center", show-overflow-tooltip, prop="taxRate", label="税率")
          template(slot-scope="scope")
            span {{ scope.row.taxRate | compare-list(defaultTaxRateSelect) }}
        el-table-column(align="center", show-overflow-tooltip, prop="countAll", label="价税合计")
          template(slot-scope="scope")
            span {{ (+scope.row.buyNum) * (+scope.row.price) }}
        el-table-column(align="center", show-overflow-tooltip, prop="currency", label="币种")
        el-table-column(align="center", show-overflow-tooltip, prop="arrivalTime", label="到货日期", min-width="96px")
          template(slot-scope="scope")
            span {{ scope.row.arrivalTime | date-locale }}
        el-table-column(align="center", show-overflow-tooltip, prop="inCount", label="已入库数量")
    .ow-table.tab-finance(v-show="tabShows[1]")
      el-table(:data="formData.finances", size="mini")
        el-table-column(align="center", show-overflow-tooltip, type="index", label="序号", :fixed="true")
        el-table-column(align="center", show-overflow-tooltip, prop="dueDate", label="应付日期", min-width="96px")
          template(slot-scope="scope")
            span {{ scope.row.dueDate | date-locale }}
        el-table-column(align="center", show-overflow-tooltip, prop="dueScale", label="应付比例")
        el-table-column(align="center", show-overflow-tooltip, prop="dueMoney", label="应付金额")
        el-table-column(align="center", show-overflow-tooltip, prop="payTerm", label="付款条件")
        el-table-column(align="center", show-overflow-tooltip, prop="prepay", label="是否预付")
        el-table-column(align="center", show-overflow-tooltip, prop="checkTerm", label="验收条件")
        el-table-column(align="center", show-overflow-tooltip, prop="comment", label="备注")
    .ow-table.tab-term(v-show="tabShows[2]")
      el-table(:data="formData.terms", size="mini")
        el-table-column(align="center", show-overflow-tooltip, type="index", label="序号", :fixed="true")
        el-table-column(align="center", show-overflow-tooltip, prop="incode", label="编号")
        el-table-column(align="center", show-overflow-tooltip, prop="termName", label="条款名称")
        el-table-column(align="center", show-overflow-tooltip, prop="termType", label="条款类型")
        el-table-column(align="center", show-overflow-tooltip, prop="termContent", label="条款内容")
        el-table-column(align="center", show-overflow-tooltip, prop="comment", label="备注")
    .ow-finish(v-show="isFinish")
      p
        span 结单备注：
        el-input(v-model="finishContent", style="width: 360px")
      .ow-btns
        el-button.dia-btn(type="primary", @click="stateOrder(0)") 结单
        el-button.dia-btn.dia-after(type="primary", @click="stateOrder(1)") 强结
</template>

<script>
import { mapGetters } from 'vuex';
import validate from '@/utils/validate';

const { isEmpty } = validate;

export default {
  name: 'orderview',
  props: {
    title: {
      type: String,
      default: '查看采购订单'
    },
    visible: Boolean,
    formData: Object,
    isFinish: Boolean
  },
  data() {
    return {
      activeTabIndex: '0',
      tabShows: [true, false, false],
      finishContent: '',
    };
  },
  methods: {
    close () {
      this.$emit('close');
    },
    stateOrder (isNormal) {
      if (isEmpty(this.finishContent)) {
        this.$message.error('结单备注不能为空');
      } else {
        this.$emit('state', isNormal, this.finishContent);
      }
    },
    handlePopTab () {
      const tabShows = [false, false, false];
      const items = ['materiels', 'finances', 'terms'];
      if (!this.formData[items[this.activeTabIndex]]) {
        this.formData[items[this.activeTabIndex]] = [];
      }
      tabShows[this.activeTabIndex] = true;
      this.tabShows = tabShows;
    }
  },
  computed: {
    ...mapGetters(['empSelect', 'oneDeptSelect', 'supplySelect', 'defaultTaxRateSelect'])
  },
  mounted () {}
};
</script>

<style lang="sass">
.cp-order-view
  .ow-table
    margin-bottom: 16px
    width: 100%
    table
      width: 100%!important
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
    .el-table__empty-block
      display: none
  .el-row
    margin-bottom: 12px
    &:nth-child(odd)
      background: #f5f5f5
    &:nth-child(even)
      background: beige
  strong
    display: inline-block
    font-weight: 400
    margin-right: 8px
  .ow-finish
    .ow-btns
      margin-top: 20px
      text-align: center
    .dia-btn
      width: 80px
    .dia-after
      margin-left: 40px
</style>
